import React, { Component } from 'react'

import {connect} from 'react-redux'
import {loadDataAsync} from '../store/actionCreator/products'
import { addToCart } from '../store/actionCreator/cart'

@connect(
  state => ({
    products: state.products.all
  }),
  dispatch => ({
    loadData() {
      dispatch(loadDataAsync())
    },
    addToCart(product) {
      dispatch(addToCart(product))
    }
  })
)
class Products extends Component {

  render() {
    return (
      <ul>
        {
          this.props.products.map(v => (
            <li 
              key={v.id}
            >
              {v.name} - {v.price}
              <button onClick={() => this.props.addToCart(v)}>add</button>
            </li>
          ))
        }
      </ul>
    )
  }

  componentDidMount() {
    this.props.loadData()
  }
}

export default Products
